<html>
	<head>
		<meta charset=utf-8 http-equiv="Content-Language" content="en"/>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- <script src="websocket.js" type="module"></script> -->
  		<!-- 引入样式 -->
  		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 	</head>
	<body>
		<div id="app">
			<el-container style = "height: 800px; border: 1px solid #eee;">
				<el-aside width = "200px" style = "background-color: rgb(238, 241, 246)">
					<el-menu :default-openeds="['1', '3']">
						<el-submenu index="1">
							<template slot="title"><i class="el-icon-message"></i>当前房间在线成员</template>
							<el-menu-item v-for="(item, index) in menbers" :key = "index + 1" :index="item.name">{{item.name}}</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-container>
					<el-header style="text-align: right; font-size: 12px">
						<el-dropdown>
							<i class="el-icon-setting" style="margin-right: 15px"></i>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<span>昵称:{{name}}  房间ID:{{room_name}}</span>
					</el-header>
					<el-main>
						<el-input type="textarea"  rows=30 readonly v-model="msg"></el-input>
						<el-input placeholder="请输入内容" v-model="input" maxlength = "20" autofocus show-word-limit clearable></el-input>						
					</el-main>
				</el-container>
			</el-container>
			<el-container>
				<el-footer style="text-align: right; font-size: 12px">
					<el-button @click="get_room_lit">加入房间</el-button>
					<el-button @click="send">发送消息</el-button>
				</el-footer>
			</el-container>
			<el-dialog title="当前在线房间" :visible.sync="visible_rooms" width="28%">
				<el-table :data="room_list">
					<el-table-column property="id" label="ID" width="100"></el-table-column>
					<el-table-column property="owner" label="房主" width="200"></el-table-column>
					<el-table-column property="name" label="房间名" width="200"></el-table-column>
				    <el-table-column
				      fixed="right"
				      label="操作"
				      width="120">
				      <template slot-scope="scope">
				        <el-button
				          @click.native.prevent="join_room(scope.$index, room_list)"
				          type="text"
				          size="small">
				          加入
				        </el-button>
				      </template>
				    </el-table-column>
				</el-table>
			</el-dialog>
		</div>
	</body>

	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript">
		new Vue({
			el:'#app',
			data() {
				return {
					visible:false,
					path:'wss://localhost:8080/chart',
					proto:'wss',
					ws:'',
					input:'',
					msg:'',
					name:'',
					token:'',
					room_name:0,
					menbers:[],
					room_list:[],
					visible_rooms:false
				}
			},
			methods:{
				join_chart(msg) {
					// 展示当前的所有在线的房间信息
					/* 
					{
						name:'', 房间名,
						owner:'', 房主ID，
					}
					*/
					this.room_list = JSON.parse(msg);
					this.visible_rooms = true;
					console.log(msg);
				},

				get_room_lit() {
					this.ws.send(JSON.stringify({
						type:3,
						token:this.token
					}));
				},

				join_room(idx, rows) {
					console.log('room name ' + this.room_list[idx].name)
					this.ws.send(JSON.stringify({
						type:2,
						token:this.token,
						room_name:this.room_list[idx].name
					}))
				},

				connect(href, proto) {
					console.log('connecting')

					this.$prompt('输入昵称:','昵称', {
						confirmButtonText:'确定',
						cancelButtonText:'取消'
					}).then(({ value }) => {
						this.$message({
							type:'success'
						});
						this.name = value
						this.ws = new WebSocket(this.path, this.proto);
						this.ws.onopen = this.success;
						this.ws.onerror = this.error;
						this.menbers.push({name:value});						
					}).catch(() => {
						var Agent = navigator.userAgent;
						if (Agent.indexOf('Firefox') != -1 || Agent.indexOf('Chrome') != -1) {
							window.open('','_self').close()
						} else {
							window.opener = null;
							window.open("about:blank", "_self");
							window.close();
						}
					})					
				},
				init() {
					if (typeof(WebSocket) === 'undefined')
						alert("You brower not support WebSocket");
					else {
						this.connect(this.href, this.proto);
					}
				},
				success() {
					console.log('connected');
					this.ws.send(JSON.stringify({
						type:0,
						name:this.name
					}));  //发送昵称到服务获取token
					this.ws.onmessage = this.get_message
				},
				error() {
					console.log('oops connect failed');
				},
				get_message(msg) {
					console.log(msg.data);
					let jso = JSON.parse(msg.data);
					/* 消息类型： 
					   登录成功:0
					   普通消息:1
					   加入房间：2
					   拉取房间列表:3
					 */
					if (jso.value == 0 && jso.type == 1)
					{
						if (jso.from == this.name)
							this.msg+= '我:' + jso.msg + '\n';
						else
							this.msg += jso.from + ':' + jso.msg + '\n';
					} else if (jso.value == 0 && jso.type == 0) {
						this.token = jso.token;
						this.ws.send(JSON.stringify({
							type:3,
							token:this.token,
							name:this.name
						}));
					} else if (jso.value == 0 && jso.type == 2) {
						this.token = jso.token;
					} else if (jso.value == 0 && jso.type == 3) {
						this.join_chart(jso.list);
					} else if (jso.value == 0 && jso.type == 4) {
						this.$prompt('输入房间名:', '创建房间', {
							confirmButtonText:'创建',
							cancelButtonText:'取消'
						}).then(({ value}) => {
							this.$message({
								type:'success'
							});
							this.room_name = value;
							this.ws.send(JSON.stringify({
								type:5,
								room_name:value,
								token:this.token
							}))
						})
					} else if (jso.value == 0 && jso.type == 5) {
						this.msg += jso.from + ':' + jso.msg + '\n';
						this.visible_rooms = false;
					}
				},
				send() {
					console.log(this.input)
					this.ws.send(JSON.stringify({
						type:1,
						token:this.token,
						msg:this.input,
						name:this.name
					}));
				},
				close() {
					console.log('connect closed');
				}
			},
			mounted() {
				this.init()
			},
			destroyed() {
				this.ws.onclose = this.close
			}
		})
	</script>
	<style type="text/css">
		.el-header {
			background-color: #b3c0d1;
			color: #333;
			line-height: 60px;
		}
		.el-aside {
			color: #333;
		}
	</style>
</html>

